<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/backstage/H-ui/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/H-ui/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/H-ui/lib/Hui-iconfont/1.0.8/iconfont.css"/>

    <link rel="stylesheet" type="text/css" href="/static/backstage/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/bootstrap/css/jquery.bs_pagination.min.css"/>
    <title>文章列表</title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>首页
    <span class="c-gray en">&gt;</span>文章管理
    <span class="c-gray en">&gt;</span>文章列表
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<div class="page-container">
    <div class="text-c">
        <span class="select-box" style="width:150px;">
            <select class="select" id="maxMenu-select">
                <option value="">大菜单</option>
                <c:forEach var="maxMenu" items="${maxMenuList}">
                    <option value="${maxMenu.maxId}">${maxMenu.maxName}</option>
                </c:forEach>
            </select>
        </span>
        <span class="select-box" style="width:150px;">
            <select class="select" id="minMenu-select">
                <option value="">小菜单</option>
            </select>
        </span>
        <input id="title" type="text" class="input-text" style="width:250px" placeholder="输入文章标题">
        <button id="select-btn" type="submit" class="btn btn-success">
            <i class="Hui-iconfont">&#xe665;</i>搜索
        </button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a class="btn btn-primary radius" id="add-info">
                <i class="Hui-iconfont">&#xe600;</i> 添加文章
            </a>
            <a class="btn btn-danger radius" id="del-btn">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
            </a>
            <a class="btn btn-warning radius" id="edit-btn">
                <i class="Hui-iconfont">&#xe6df;</i> 修改文章
            </a>
        </span>
    </div>
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr>
            <th scope="col" colspan="9">文章列表</th>
        </tr>
        <tr class="text-c">
            <th width="50"><input type="checkbox" id="check-all"/></th>
            <th width="150">标题</th>
            <th width="150">作者</th>
            <th>文章内容</th>
            <th width="100">点击量</th>
            <th width="200">创建时间</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="paginate"></div>
</div>

<script src="/static/backstage/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/backstage/H-ui/lib/layer/2.4/layer.js"></script>
<script src="/static/backstage/H-ui/static/h-ui.admin/js/H-ui.admin.js"></script>

<script src="/static/backstage/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/backstage/bootstrap/js/jquery.bs_pagination.min.js"></script>
<script src="/static/backstage/bootstrap/localization/en.js"></script>


<script>
    // 选择大菜单
    $("#maxMenu-select").on("click", "option", function () {
        let maxMenuId = $(this).val();
        $.post("/backstage/info/selectMinMenuNameByMaxId", {id: maxMenuId}, function (data) {
            let html = '<option value="">小菜单</option>';
            for (let i = 0; i < data.length; i++) {
                html += '<option value="' + data[i].minId + '">' + data[i].minName + '</option>';
            }
            $("#minMenu-select").html(html);
        });
    });

    //给"全选"按钮添加单击事件
    $("#check-all").click(function () {
        $("tbody tr td input").prop("checked", this.checked);
    });
    $("tbody").on("click", "tr td input", function () {
        //如果列表中的所有checkbox都选中，则"全选"按钮也选中
        if ($("tr td input").size() == $("tr td input:checked").size()) {
            $("#check-all").prop("checked", true);
        } else {//如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
            $("#check-all").prop("checked", false);
        }
    });
</script>

<script>
    // 页面加载完查询前5条数据
    queryInfoByConditionForPage(1, 5);

    // 点击"搜索"
    $("#select-btn").click(function () {
        //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
        queryInfoByConditionForPage(1, $("#paginate").bs_pagination('getOption', 'rowsPerPage'));
    });

    // 点击"添加文章"
    $("#add-info").click(function () {
        layer_show("添加文章", "/backstage/info/add");
    })

    // 点击"批量删除"
    $("#del-btn").click(function () {
        //收集参数
        //获取列表中所有被选中的checkbox
        let checkedIds = $("tr td input:checked");
        console.log(checkedIds)
        if (checkedIds.size() == 0) {
            layer.msg("必须选中最少一个文章", {icon: 5, time: 1000});
            return;
        }

        layer.confirm("确定删除吗？", function () {
            // 封装参数，将选中的文章的id存在数组arr中
            var arr = [];
            checkedIds.each(function (i, n) {
                arr.push($(this).val());
            });
            // 发送请求
            $.ajax({
                    url: '/backstage/info/del',
                    data: {arr: arr},
                    type: 'post',
                    dataType: 'json',
                    traditional: true,
                    success: function (data) {
                        if (data.code == 1) {
                            layer.msg('已删除!', {icon: 5, time: 1000});
                            setTimeout('window.location.reload()', 200);
                        } else {
                            layer.msg(data.message, {icon: 2, time: 1000});
                        }
                    }
                }
            );
        });
    });

    // 点击"修改"
    $("#edit-btn").click(function () {
        //收集参数
        //获取列表中所有被选中的checkbox
        var checkedIds = $("tr td input:checked");

        if (checkedIds.size() == 0) {
            layer.msg("请选择操作对象", {icon: 2, time: 1000});
            return;
        }
        if (checkedIds.size() > 1) {
            layer.msg("一次只能修改一个文章", {icon: 2, time: 1000});
            return;
        }
        layer_show("修改文章", "/backstage/info/edit/" + checkedIds.val());
    })

    function queryInfoByConditionForPage(pageNo, pageSize) {
        // 收集参数
        let maxId = $("#maxMenu-select").find("option:selected").val();
        let minId = $("#minMenu-select").find("option:selected").val();
        let title = $("#title").val().trim();
        // 发送请求
        $.ajax({
            url: '/backstage/info/queryInfoByConditionForPage',
            data: {
                maxId: maxId,
                minId: minId,
                title: title,
                pageNo: pageNo,
                pageSize: pageSize
            },
            type: 'post',
            dataType: 'json',
            success: function (data) {
                //取消"全选"按钮
                $("#check-all").prop("checked", false);

                let html = "";
                for (let i = 0; i < data.infoList.length; i++) {
                    html += "<tr class='text-c'>"
                    html += "<td><input type='checkbox' value='" + data.infoList[i].infoId + "'/></td>"
                    html += "<td>" + data.infoList[i].title + "</td>"
                    html += "<td>" + data.infoList[i].author + "</td>"
                    html += "<td><a target='_blank' href='/proscenium/shownews/" + data.infoList[i].infoId + "'> " + data.infoList[i].content + "</a></td>"
                    html += "<td>" + data.infoList[i].hits + "</td>"
                    html += "<td>" + data.infoList[i].addDate + "</td>"
                    html += "</tr>"
                }
                $("tbody").html(html);

                //计算总页数
                let totalPages = 1;
                if (data.totalRows % pageSize == 0) {
                    totalPages = data.totalRows / pageSize;
                } else {
                    totalPages = parseInt(data.totalRows / pageSize) + 1;
                }
                //对容器调用bs_pagination工具函数，显示翻页信息
                $("#paginate").bs_pagination({
                    currentPage: pageNo,//当前页号,相当于pageNo
                    rowsPerPage: pageSize,//每页显示条数,相当于pageSize
                    totalRows: data.totalRows,//总条数
                    totalPages: totalPages,  //总页数,必填参数.
                    visiblePageLinks: 5,//最多可以显示的卡片数
                    showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
                    showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
                    showRowsInfo: true,//是否显示记录的信息，默认true--显示
                    //用户每次切换页号，都自动触发本函数;
                    //每次返回切换页号之后的pageNo和pageSize
                    onChangePage: function (event, pageObj) {
                        queryInfoByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
                    }
                });
            }
        });
    }
</script>
</body>
</html>
